<template>
	<view class="music-page">
		<!-- 音乐主视觉 -->
		<view class="music-hero">
			<swiper class="hero-swiper" :autoplay="true" :interval="4000" :duration="800" :circular="true">
				<swiper-item v-for="(item, index) in heroImages" :key="index">
					<image :src="item.image" class="hero-bg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="hero-gradient"></view>
			<view class="hero-content">
				<view class="music-badge">
					<text class="badge-icon">🎵</text>
					<text class="badge-label">天籁之音</text>
				</view>
				<text class="hero-title">音乐天地</text>
				<text class="hero-subtitle">聆听千年传承的动人旋律</text>
				<view class="hero-stats">
					<view class="stat-item">
						<text class="stat-number">{{ classicMusic.length }}</text>
						<text class="stat-label">经典曲目</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number">{{ techniques.length }}</text>
						<text class="stat-label">演奏技法</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 经典曲目展示 -->
		<view class="classics-section">
			<view class="section-header">
				<view class="header-ornament">
					<view class="ornament-line"></view>
					<text class="ornament-icon">🎼</text>
					<view class="ornament-line"></view>
				</view>
				<text class="section-title">经典曲目</text>
				<text class="section-subtitle">传世名曲，百听不厌</text>
			</view>

			<view class="music-showcase">
				<view v-for="item in classicMusic" :key="item.id" class="music-track">
					<view class="track-visual">
						<image :src="item.cover" class="track-cover" mode="aspectFill"></image>
						<view class="track-overlay">
							<view class="play-indicator" :class="{ playing: currentPlaying === item.id && isPlaying }"
								@click="playMusic(item.id)">
								<text
									class="play-icon">{{ currentPlaying === item.id && isPlaying ? '⏸️' : '▶️' }}</text>
							</view>
						</view>
						<view class="difficulty-badge" :class="{
                 advanced: item.difficulty === '高级',
                 intermediate: item.difficulty === '中级',
                 beginner: item.difficulty === '初级'
               }">
							{{ item.difficulty }}
						</view>
					</view>

					<view class="track-info">
						<view class="track-header">
							<text class="track-title">{{ item.title }}</text>
							<view class="category-tag">{{ item.category }}</view>
						</view>

						<view class="track-meta">
							<view class="meta-item">
								<text class="meta-label">演奏</text>
								<text class="meta-value">{{ item.artist }}</text>
							</view>
							<view class="meta-item">
								<text class="meta-label">作曲</text>
								<text class="meta-value">{{ item.composer }}</text>
							</view>
							<view class="meta-item">
								<text class="meta-label">时长</text>
								<text class="meta-value">{{ item.duration }}</text>
							</view>
						</view>

						<text class="track-description">{{ item.description }}</text>

						<view class="track-actions">
							<view class="action-btn primary" @click="playMusic(item.id)">
								<text
									class="btn-text">{{ currentPlaying === item.id && isPlaying ? '暂停' : '播放' }}</text>
								<text
									class="btn-icon">{{ currentPlaying === item.id && isPlaying ? '⏸️' : '🎵' }}</text>
							</view>
							<view class="action-btn secondary" @click="viewMusicDetail(item.id)">
								<text class="btn-text">详情</text>
								<text class="btn-icon">📖</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 演奏技法 -->
		<view class="techniques-section">
			<view class="section-header">
				<view class="header-ornament">
					<view class="ornament-line"></view>
					<text class="ornament-icon">🎯</text>
					<view class="ornament-line"></view>
				</view>
				<text class="section-title">演奏技法</text>
				<text class="section-subtitle">精湛技艺，传承千年</text>
			</view>

			<view class="techniques-grid">
				<view v-for="item in techniques" :key="item.name" class="technique-card">
					<view class="technique-header">
						<view class="technique-icon">{{ item.icon }}</view>
						<view class="technique-level" :class="{
                 advanced: item.difficulty === '高级',
                 intermediate: item.difficulty === '中级',
                 beginner: item.difficulty === '初级'
               }">
							{{ item.difficulty }}
						</view>
					</view>

					<view class="technique-content">
						<text class="technique-name">{{ item.name }}</text>
						<text class="technique-description">{{ item.description }}</text>
						<view class="usage-section">
							<text class="usage-label">应用场景</text>
							<text class="usage-text">{{ item.usage }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 音乐特色 -->
		<view class="features-section">
			<view class="section-header">
				<view class="header-ornament">
					<view class="ornament-line"></view>
					<text class="ornament-icon">✨</text>
					<view class="ornament-line"></view>
				</view>
				<text class="section-title">音乐特色</text>
				<text class="section-subtitle">独特魅力，世界认知</text>
			</view>

			<view class="features-showcase">
				<view v-for="item in musicFeatures" :key="item.title" class="feature-item">
					<view class="feature-visual">
						<view class="feature-icon">{{ item.icon }}</view>
						<view class="feature-glow"></view>
					</view>
					<view class="feature-content">
						<text class="feature-title">{{ item.title }}</text>
						<text class="feature-subtitle">{{ item.subtitle }}</text>
						<text class="feature-description">{{ item.description }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 音乐寄语 -->
		<view class="music-message">
			<view class="message-card">
				<view class="message-decoration">🎶</view>
				<text class="message-title">音乐无国界，传承有情怀</text>
				<text class="message-content">
					梁河葫芦丝音乐以其独特的魅力征服了世界听众，从田间地头到音乐厅堂，从民族节庆到国际舞台，每一个音符都承载着深厚的文化内涵。让我们用心聆听，用情传承，让这天籁之音永远响彻云霄。
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图数据
				heroImages: [{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D2.png'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D3.jpg'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D5.jpg'
					}
				],

				// 当前播放状态
				currentPlaying: null,
				isPlaying: false,
				currentAudio: null,
				// 经典曲目
				classicMusic: [{
						id: 1,
						title: '月光下的凤尾竹',
						artist: '哏德全',
						composer: '施光南 词曲',
						cover: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg',
						duration: '4:32',
						difficulty: '中级',
						category: '经典名曲',
						description: '最具代表性的葫芦丝经典曲目，由哏德全首演并推广至全世界。旋律优美动人，意境深远，表现了傣族人民对美好生活的向往。',
						story: '此曲诞生于1979年，由著名作曲家施光南创作，哏德全用葫芦丝演奏后迅速传播，成为葫芦丝的代表作品。',
						audioSrc: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E3%80%8A%E6%9C%88%E5%85%89%E4%B8%8B%E7%9A%84%E5%87%A4%E5%B0%BE%E7%AB%B9%E3%80%8B%E9%9F%B3%E9%A2%91.mp3',
						videoSrc: '/static/media/葫芦丝《月光下的凤尾竹》 原版独奏曲示范，崔宇鹏演奏作品.mp4'
					},
					{
						id: 2,
						title: '竹林深处',
						artist: '龚全国',
						composer: '龚全国 作曲',
						cover: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D2.png',
						duration: '5:18',
						difficulty: '高级',
						category: '创作曲目',
						description: '龚全国的代表作品，曲调悠扬婉转，运用了复杂的演奏技巧，仿佛置身于幽深的竹林之中，感受大自然的宁静与神秘。',
						story: '作品创作于1990年代，灵感来源于作者在云南竹林中的真实体验，融合了多种民族音乐元素。',
						audioSrc: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E3%80%8A%E7%91%B6%E6%97%8F%E8%88%9E%E6%9B%B2%E3%80%8B%E9%9F%B3%E9%A2%91.mp3',
						videoSrc: '/static/media/葫芦丝名曲《竹林深处》旋律优美动听，百听不厌.mp4'
					},
					{
						id: 3,
						title: '瑶族舞曲',
						artist: '马永亮',
						composer: '刘铁山 茅沅 作曲',
						cover: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D3.jpg',
						duration: '3:45',
						difficulty: '中级',
						category: '移植曲目',
						description: '原为管弦乐作品，被成功移植为葫芦丝独奏曲。旋律悠扬，节奏明快，展现了瑶族人民欢快的舞蹈场面。',
						story: '原曲创作于1952年，后被多种乐器演奏，葫芦丝版本更具民族特色和亲和力。',
						audioSrc: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E3%80%8A%E7%AB%B9%E6%9E%97%E6%B7%B1%E5%A4%84%E3%80%8B%E9%9F%B3%E9%A2%91.mp3',
						videoSrc: '/static/media/葫芦丝十大经典名曲《瑶族舞曲》，旋律悠扬百听不厌，马永亮演奏.mp4'
					},
					{
						id: 4,
						title: '苹果香',
						artist: '马永亮',
						composer: '李永强 作曲',
						cover: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D5.jpg',
						duration: '4:15',
						difficulty: '中级',
						category: '民族风情',
						description: '2024年度最火歌曲，马永亮演奏完整版，超好听。现代流行音乐与传统葫芦丝的完美结合。',
						audioSrc: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E3%80%8A%E8%8B%B9%E6%9E%9C%E9%A6%99%E3%80%8B%E9%9F%B3%E9%A2%91.mp3',
						videoSrc: '/static/media/葫芦丝《苹果香》2024年度最火歌曲，马永亮演奏完整版，超好听.mp4',
						story: '作曲家深入山区体验生活后创作，融合了多个少数民族的音乐特色。',
					}
				],

				// 演奏技法
				techniques: [{
						name: '颤音技法',
						icon: '🎵',
						difficulty: '中级',
						description: '通过手指快速抖动产生波浪般的音效，是葫芦丝最重要的表现技法之一。',
						usage: '常用于表现激动、紧张或装饰性的音乐段落。'
					},
					{
						name: '滑音技法',
						icon: '🎶',
						difficulty: '初级',
						description: '音与音之间的平滑过渡，分为上滑音和下滑音，增强旋律的连贯性。',
						usage: '用于模仿人声歌唱效果，使音乐更具表现力。'
					},
					{
						name: '吐音技法',
						icon: '💨',
						difficulty: '初级',
						description: '用舌头控制气流，产生断续的音响效果，分为单吐、双吐、三吐等。',
						usage: '用于表现活泼、跳跃的音乐情绪。'
					},
					{
						name: '打音技法',
						icon: '🎯',
						difficulty: '高级',
						description: '在主音的基础上快速加入装饰音，丰富音乐的层次和色彩。',
						usage: '常用于民族风格浓郁的乐曲中，增加装饰效果。'
					}
				],

				// 音乐特色
				musicFeatures: [{
						title: '天然和声',
						icon: '🌿',
						subtitle: '独特的音响效果',
						description: '葫芦丝的三管设计形成天然和声，主管奏旋律，副管发持续音，营造出独特的音响空间。'
					},
					{
						title: '音色柔美',
						icon: '🌙',
						subtitle: '温润如玉的音质',
						description: '音色柔和甜美，既有竹笛的清脆，又有埙的厚重，形成了独特的音色特点。'
					},
					{
						title: '表现力强',
						icon: '🎭',
						subtitle: '丰富的情感表达',
						description: '通过各种演奏技法，能够表现出丰富的情感色彩，适合演奏抒情性乐曲。'
					}
				]
			}
		},
		methods: {
			playMusic(e) {
	
				const musicId = e
				const music = this.classicMusic.find(item => item.id === musicId)

				if (!music) {
					uni.showToast({
						title: '歌曲不存在',
						icon: 'none',
						duration: 1500
					})
					return
				}
				let audio = uni.createInnerAudioContext()
				audio.src = music.audioSrc

				audio.onError((err) => {
					console.error('音频播放错误:', err)
					uni.showToast({
						title: '音频播放失败',
						icon: 'none'
					})
				})
				audio.onPlay(() => {
					console.log('开始播放');
				});
				audio.onPause(() => {
					console.log('暂停播放')
				})
				audio.onEnded(() => {
					this.isPlaying = false
					this.currentPlaying = -1
				})
				console.log(this.currentPlaying === musicId && this.isPlaying)
				if (this.currentPlaying === musicId && this.isPlaying) {
					// 正在播放同一首，点击则暂停
					this.isPlaying = false
					uni.showToast({
						title: '暂停播放',
						icon: 'none',
						duration: 1000
					})
					this.currentAudio.pause()
				} else {
					if(this.currentAudio) {
						this.currentAudio.destroy()
					}
					// 播放新歌曲
					this.currentPlaying = musicId
					this.isPlaying = true
					uni.showToast({
						title: `播放《${music.title}》`,
						icon: 'none',
						duration: 1500
					})
					this.currentAudio = audio
					audio.play()
				}
			},
			/**
			 * 查看音乐详情
			 */
			viewMusicDetail(e) {
				const musicId = e
				const music = this.classicMusic.find(item => item.id === musicId)

				if (!music) return

				uni.showModal({
					title: music.title,
					content: `演奏：${music.artist}\n\n${music.story || '暂无详细介绍。'}`,
					showCancel: true,
					cancelText: '关闭',
					confirmText: '播放',
					success: (res) => {
						if (res.confirm) {
							// 用户点击“播放”，模拟触发播放
							// 构造事件对象（简化版），复用 playMusic
							this.playMusic(musicId)
						}
					}
				})
			}
		},
		onHide() {
			// 页面销毁时清理音频资源
			if (this.currentAudio) {
				this.currentAudio.destroy()
				this.currentAudio = null
			}
		},

		// 页面加载（对应 onLoad）
		onLoad(options) {
			console.log('音乐页面加载完成');
			// options 为页面跳转时传递的参数，用法与小程序一致
			console.log('页面参数:', options);
		},

		// 页面渲染完成（对应 onReady）
		onReady() {
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: '音乐天地'
			});
		},

		// 分享功能（对应 onShareAppMessage）
		onShareAppMessage() {
			return {
				title: '梁河葫芦丝音乐天地',
				path: '/pages/music/music', // 注意路径应与 pages.json 中注册的路径一致
				imageUrl: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D2.png' // 建议使用绝对路径或网络图片
			};
		},
	}
</script>

<style lang="scss" scoped>
	/* 音乐页面 - 全新设计 */
	.music-page {
		background: linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%);
		min-height: 100vh;
	}

	/* 音乐主视觉区域 */
	.music-hero {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.hero-swiper {
		width: 100%;
		height: 100%;
	}

	.hero-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hero-gradient {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg,
				rgba(58, 117, 99, 0.8) 0%,
				rgba(140, 98, 57, 0.6) 50%,
				rgba(44, 36, 24, 0.9) 100%);
		z-index: 1;
	}

	.hero-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: white;
		z-index: 2;
		width: 90%;
		max-width: 600rpx;
	}

	.music-badge {
		display: inline-flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(15rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 50rpx;
		padding: 16rpx 32rpx;
		margin-bottom: 50rpx;
	}

	.badge-icon {
		font-size: 32rpx;
		margin-right: 12rpx;
	}

	.badge-label {
		font-size: 26rpx;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.95);
	}

	.hero-title {
		display: block;
		font-size: 80rpx;
		font-weight: 900;
		margin-bottom: 24rpx;
		text-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.4);
		background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.hero-subtitle {
		display: block;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 60rpx;
		opacity: 0.9;
		text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
	}

	.hero-stats {
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(20rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		padding: 24rpx 32rpx;
	}

	.stat-item {
		text-align: center;
	}

	.stat-number {
		display: block;
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 8rpx;
		color: #ffffff;
	}

	.stat-label {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.stat-divider {
		width: 2rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.3);
		margin: 0 40rpx;
	}

	/* 通用段落头部 */
	.section-header {
		text-align: center;
		margin-bottom: 80rpx;
	}

	.header-ornament {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.ornament-line {
		width: 100rpx;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, #3a7563, transparent);
	}

	.ornament-icon {
		font-size: 40rpx;
		margin: 0 24rpx;
		background: linear-gradient(135deg, #3a7563 0%, #8c6239 100%);
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(58, 117, 99, 0.3);
	}

	.section-title {
		display: block;
		font-size: 64rpx;
		font-weight: 900;
		background: linear-gradient(135deg, #3a7563 0%, #8c6239 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		margin-bottom: 20rpx;
	}

	.section-subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
		opacity: 0.8;
	}

	/* 经典曲目区域 */
	.classics-section {
		padding: 120rpx 40rpx;
		background: #ffffff;
	}

	.music-showcase {
		max-width: 900rpx;
		margin: 0 auto;
	}

	.music-track {
		display: flex;
		background: #ffffff;
		border-radius: 32rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid rgba(58, 117, 99, 0.1);
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.music-track:active {
		transform: translateY(-8rpx);
		box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.12);
	}

	.track-visual {
		position: relative;
		width: 280rpx;
		height: 280rpx;
		flex-shrink: 0;
	}

	.track-cover {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.track-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.music-track:active .track-overlay {
		opacity: 1;
	}

	.play-indicator {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10rpx);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.play-indicator.playing {
		background: linear-gradient(135deg, #3a7563 0%, #8c6239 100%);
		animation: pulse-playing 2s infinite;
	}

	@keyframes pulse-playing {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}
	}

	.play-icon {
		font-size: 32rpx;
		color: #3a7563;
	}

	.play-indicator.playing .play-icon {
		color: white;
	}

	.difficulty-badge {
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: 600;
		color: white;
	}

	.difficulty-badge.beginner {
		background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	}

	.difficulty-badge.intermediate {
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	}

	.difficulty-badge.advanced {
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	}

	.track-info {
		flex: 1;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
	}

	.track-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.track-title {
		font-size: 36rpx;
		font-weight: 800;
		color: #2c2418;
		line-height: 1.3;
		flex: 1;
	}

	.category-tag {
		background: rgba(58, 117, 99, 0.1);
		color: #3a7563;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
		margin-left: 16rpx;
	}

	.track-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		margin-bottom: 24rpx;
	}

	.meta-item {
		display: flex;
		align-items: center;
	}

	.meta-label {
		font-size: 22rpx;
		color: #8c6239;
		font-weight: 600;
		margin-right: 8rpx;
	}

	.meta-value {
		font-size: 22rpx;
		color: #4a4a4a;
	}

	.track-description {
		font-size: 26rpx;
		color: #5a5a5a;
		line-height: 1.6;
		margin-bottom: 32rpx;
		flex: 1;
		text-align: justify;
	}

	.track-actions {
		display: flex;
		gap: 16rpx;
	}

	.action-btn {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		border: none;
	}

	.action-btn.primary {
		background: linear-gradient(135deg, #3a7563 0%, #8c6239 100%);
		color: white;
		box-shadow: 0 8rpx 24rpx rgba(58, 117, 99, 0.3);
	}

	.action-btn.secondary {
		background: rgba(58, 117, 99, 0.1);
		color: #3a7563;
		border: 1rpx solid rgba(58, 117, 99, 0.2);
	}

	.btn-text {
		margin-right: 8rpx;
	}

	.btn-icon {
		font-size: 20rpx;
	}

	/* 演奏技法区域 */
	.techniques-section {
		padding: 120rpx 40rpx;
		background: linear-gradient(180deg, #f8f5f0 0%, #ffffff 100%);
	}

	.techniques-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 32rpx;
		max-width: 800rpx;
		margin: 0 auto;
	}

	@media (min-width: 640rpx) {
		.techniques-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.technique-card {
		background: #ffffff;
		border-radius: 28rpx;
		padding: 36rpx 32rpx;
		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid rgba(58, 117, 99, 0.1);
		transition: all 0.4s ease;
	}

	.technique-card:active {
		transform: translateY(-6rpx);
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.12);
	}

	.technique-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.technique-icon {
		font-size: 48rpx;
		width: 80rpx;
		height: 80rpx;
		background: linear-gradient(135deg, rgba(58, 117, 99, 0.1) 0%, rgba(140, 98, 57, 0.1) 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.technique-level {
		padding: 6rpx 12rpx;
		border-radius: 16rpx;
		font-size: 20rpx;
		font-weight: 600;
		color: white;
	}

	.technique-level.beginner {
		background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	}

	.technique-level.intermediate {
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	}

	.technique-level.advanced {
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	}

	.technique-content {
		text-align: left;
	}

	.technique-name {
		display: block;
		font-size: 32rpx;
		font-weight: 800;
		color: #2c2418;
		margin-bottom: 16rpx;
	}

	.technique-description {
		display: block;
		font-size: 26rpx;
		color: #5a5a5a;
		line-height: 1.6;
		margin-bottom: 20rpx;
		text-align: justify;
	}

	.usage-section {
		background: rgba(58, 117, 99, 0.05);
		border-radius: 16rpx;
		padding: 20rpx;
		border-left: 4rpx solid #3a7563;
	}

	.usage-label {
		display: block;
		font-size: 22rpx;
		font-weight: 600;
		color: #3a7563;
		margin-bottom: 8rpx;
	}

	.usage-text {
		font-size: 24rpx;
		color: #4a4a4a;
		line-height: 1.5;
	}

	/* 音乐特色区域 */
	.features-section {
		padding: 120rpx 40rpx;
		background: #ffffff;
	}

	.features-showcase {
		max-width: 600rpx;
		margin: 0 auto;
	}

	.feature-item {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
		padding: 40rpx;
		background: linear-gradient(135deg, rgba(58, 117, 99, 0.05) 0%, rgba(140, 98, 57, 0.05) 100%);
		border-radius: 32rpx;
		border: 1rpx solid rgba(58, 117, 99, 0.1);
		transition: all 0.4s ease;
	}

	.feature-item:last-child {
		margin-bottom: 0;
	}

	.feature-item:active {
		transform: translateY(-6rpx);
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
	}

	.feature-visual {
		position: relative;
		margin-right: 32rpx;
		flex-shrink: 0;
	}

	.feature-icon {
		font-size: 64rpx;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #3a7563 0%, #8c6239 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 12rpx 32rpx rgba(58, 117, 99, 0.3);
		position: relative;
		z-index: 2;
	}

	.feature-glow {
		position: absolute;
		top: -20rpx;
		left: -20rpx;
		width: 160rpx;
		height: 160rpx;
		background: radial-gradient(circle, rgba(58, 117, 99, 0.2) 0%, transparent 70%);
		border-radius: 50%;
		animation: glow 3s ease-in-out infinite alternate;
	}

	@keyframes glow {
		0% {
			opacity: 0.5;
			transform: scale(1);
		}

		100% {
			opacity: 0.8;
			transform: scale(1.1);
		}
	}

	.feature-content {
		flex: 1;
	}

	.feature-title {
		display: block;
		font-size: 36rpx;
		font-weight: 800;
		color: #2c2418;
		margin-bottom: 12rpx;
	}

	.feature-subtitle {
		display: block;
		font-size: 24rpx;
		color: #8c6239;
		font-weight: 600;
		margin-bottom: 16rpx;
	}

	.feature-description {
		font-size: 26rpx;
		color: #5a5a5a;
		line-height: 1.6;
		text-align: justify;
	}

	/* 音乐寄语区域 */
	.music-message {
		padding: 120rpx 40rpx;
		background: linear-gradient(135deg, #2c2418 0%, #3a7563 100%);
	}

	.message-card {
		max-width: 600rpx;
		margin: 0 auto;
		text-align: center;
		color: white;
	}

	.message-decoration {
		font-size: 100rpx;
		margin-bottom: 40rpx;
		display: block;
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	.message-title {
		display: block;
		font-size: 52rpx;
		font-weight: 900;
		margin-bottom: 40rpx;
		text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
	}

	.message-content {
		display: block;
		font-size: 28rpx;
		line-height: 1.8;
		opacity: 0.9;
		text-align: justify;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}

	/* 响应式优化 */
	@media (max-width: 480rpx) {
		.music-track {
			flex-direction: column;
		}

		.track-visual {
			width: 100%;
			height: 250rpx;
		}

		.hero-stats {
			flex-direction: column;
			gap: 20rpx;
		}

		.stat-divider {
			width: 60rpx;
			height: 2rpx;
			margin: 0;
		}

		.feature-item {
			flex-direction: column;
			text-align: center;
		}

		.feature-visual {
			margin-right: 0;
			margin-bottom: 24rpx;
		}
	}

	/* 动画增强 */
	.music-track,
	.technique-card,
	.feature-item {
		opacity: 0;
		transform: translateY(30rpx);
		animation: slideInUp 0.8s ease forwards;
	}

	.music-track:nth-child(1) {
		animation-delay: 0.1s;
	}

	.music-track:nth-child(2) {
		animation-delay: 0.2s;
	}

	.music-track:nth-child(3) {
		animation-delay: 0.3s;
	}

	.music-track:nth-child(4) {
		animation-delay: 0.4s;
	}

	.technique-card:nth-child(1) {
		animation-delay: 0.1s;
	}

	.technique-card:nth-child(2) {
		animation-delay: 0.2s;
	}

	.technique-card:nth-child(3) {
		animation-delay: 0.3s;
	}

	.technique-card:nth-child(4) {
		animation-delay: 0.4s;
	}

	.feature-item:nth-child(1) {
		animation-delay: 0.1s;
	}

	.feature-item:nth-child(2) {
		animation-delay: 0.2s;
	}

	.feature-item:nth-child(3) {
		animation-delay: 0.3s;
	}

	@keyframes slideInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>